<template>
  <div>
    <v-data-table
      :headers="headers"
      :items="people"
      sort-by="calories"
      class="elevation-1"
      hide-default-footer
      :page.sync="page"
      :items-per-page="10"
      @page-count="pageCount = $event"
    >
      <template v-slot:item.actions="{ item }">
        <v-icon small class="mr-2" @click="onEditClick(item)">
          mdi-pencil
        </v-icon>
        <v-icon small @click="onDeleteClick(item)">
          mdi-delete
        </v-icon>
      </template>
      <template v-slot:no-data>
        <span>没有数据! (╥╯^╰╥)</span>
      </template>
    </v-data-table>
    <div class="text-center pt-2">
      <v-pagination v-model="page" :length="pageCount"></v-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { PersonState } from "@/State/PersonState";
import { DataTableHeader } from "vuetify";

@Component({})
export default class PeopleList extends Vue {
  @Prop({
    default: (): PersonState[] => {
      return [];
    }
  })
  people: PersonState[];

  page = 1;
  pageCount = 0;
  headers: DataTableHeader[] = [
    {
      text: "姓",
      value: "FirstName"
    },
    {
      text: "名",
      value: "LastName"
    },

    {
      text: "手机号",
      value: "PhoneNumber"
    },
    {
      text: "操作",
      sortable: false,
      value: "actions"
    }
  ];

  private onEditClick(state: PersonState) {
    this.$emit("edit", state);
  }

  private onDeleteClick(state: PersonState) {
    this.$emit("delete", state);
  }
}
</script>
